<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!--- Link to the last version of BabylonJS --->
    <!-- <script src="https://cdn.babylonjs.com/babylon.js"></script> -->
	<script src="babylon.js" type="text/javascript" charset="utf-8"></script>
	<!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
	<script src="babylonjs.loaders.min.js"></script>
	<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
	<script src="pep.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
		window.addEventListener('DOMContentLoaded', function(){
			// get the canvas DOM element
			var canvas = document.getElementById('renderCanvas');

			// load the 3D engine
			var engine = new BABYLON.Engine(canvas, true);

			// createScene function that creates and return the scene
			var createScene = function(){
				// create a basic BJS Scene object
				var scene = new BABYLON.Scene(engine);

				// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
				var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

				// target the camera to scene origin
				camera.setTarget(BABYLON.Vector3.Zero());

				// attach the camera to the canvas
				camera.attachControl(canvas, false);

				// create a basic light, aiming 0,1,0 - meaning, to the sky
				var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

				// create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
				var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

				// move the sphere upward 1/2 of its height
				sphere.position.y = 1;

				// create a built-in "ground" shape;
				var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

				// return the created scene
				return scene;
			}
			
			var delayCreateScene = function () {
			    // Create a scene.
			    var scene = new BABYLON.Scene(engine);
				var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
				
				// target the camera to scene origin
				camera.setTarget(BABYLON.Vector3.Zero());
				
				// attach the camera to the canvas
				camera.attachControl(canvas, false);
				
				// create a basic light, aiming 0,1,0 - meaning, to the sky
				var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
				
			    // Create a default skybox with an environment.
			    // var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
			    // var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);
				
			    // Append glTF model to scene.
			    BABYLON.SceneLoader.Append("./", "che.obj", scene, function (scene) {
			        // Create a default arc rotate camera and light.
			        scene.createDefaultCameraOrLight(true, true, true);
					// var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
					// myMaterial.diffuseTexture = new BABYLON.Texture("3d66Model-591786-files-1.jpg", scene);
					
			        // The default camera looks at the back of the asset.
			        // Rotate the camera by 180 degrees to the front of the asset.
			        scene.activeCamera.alpha += Math.PI;
			    });
			
			    return scene;
			};
			

			// call the createScene function
			var scene = delayCreateScene();

			// run the render loop
			engine.runRenderLoop(function(){
				scene.render();
			});

			// the canvas/window resize event handler
			window.addEventListener('resize', function(){
				engine.resize();
			});
		});
	</script>
</body>
</html>